import React, {useState,useEffect} from 'react'
import axios from 'axios'
import '../../styles/article.css'
import { HeartOutlined ,BranchesOutlined,EyeOutlined} from '@ant-design/icons'
import {useNavigate} from 'react-router-dom'

function ArticleTemp(props:any){
  let [data,setState] = useState([])
  let [name,setName] = useState('')
  let navigate = useNavigate()
  useEffect(()=>{
    axios.get('/api/article').then(res=>{
      let arr:Array<any> = []
      res.data.data[0].forEach((item:any,index:number)=>{
        if(props.id === item.category.id){
          arr.push(item)
          setName(item.category.label)
        }
      })
      setState(arr as any)
    })
  },[props.id])
    return (
      <div className='alldata-wrap'>
        <h1 className='alldata-name'>{name}</h1>
        <p className='alldata-length'>共搜索到<span className='alldata-length-size'>{data.length}</span>条文章</p>
        <ul className='alldata-ul'>
          {
            data.map((item:any,index:number)=>{
              return <li
              key={index}
              onMouseOver={()=>{
                let h3s = document.getElementsByClassName("h3")
                h3s[index].classList.add('h33')
              }}
              onMouseOut={()=>{
                let h3s = document.getElementsByClassName("h3")
                h3s[index].classList.remove('h33')
              }}
              onClick={()=>{
                navigate(`/detail/${item.id}`,{
                  state:{
                    item:item
                  }
                })
              }}
              >
                <div className='aritcle-li-box'>
                    <h3 className='h3'>{item.title}</h3>
                    <span>{item.createAt.split('-')[0]}年{item.createAt.split('-')[1]}月{item.createAt.split('-')[2].split('T')[0]}日{item.createAt.slice(11,13)}时{item.createAt.slice(14,16)}分</span>
                  </div>
                  <div className='article-li-box2'>
                      <span><HeartOutlined /> {item.likes}</span>
                      <span><EyeOutlined /> {item.views}</span>
                      <span><BranchesOutlined /> 分享</span>
                  </div>
              </li>
            })
          }
        </ul>
      </div>
    )
  
}

export default ArticleTemp
